import React, {} from "react";
import CardList from "./CardList";
import Title from "./Title";
import barChatIcon from "./assets/BarChart.svg";
import circleUp from "./assets/CircleUp.svg";
import notice from "./assets/NotesTime.svg";
import userMore from "./assets/UserMore.svg";
import Item from "./Item";
import StatisticCard from "./StatisticCard";
import WorkItem from "./WorkItem";
import Welcome from "./Welcome";
import todo from "./assets/TODO_INFO.svg";
import UserProfile from "./UserProfile";
import TabItem from "./TabItem";
import home from "./assets/home.svg";
import app from "./assets/应用APP_o.svg";
import folder from "./assets/文件夹、文件.svg";
import message from "./assets/信息.svg";
import setting from "./assets/设置 (1).svg";
import show from "./assets/截屏2024-07-14 03.45.45.png";
import rightArrow from "./assets/右箭头.svg";

export default function () {
    return (
        <div>
            <div style={{
                display: 'flex',
                height: '100vh',
            }}>
                <div className={'menu'} style={{
                    padding: 30,
                    display: "flex",
                    flexDirection: 'column',
                }}>
                    <div style={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        marginBottom: 60
                    }}>
                        <img style={{
                            width: 60,
                            marginRight: 10
                        }} src={todo} alt=""/>
                        <p style={{
                            fontWeight: 'bold',
                            fontSize: 30,
                            color: '#2c74ae'
                        }}>
                            AsmrProg
                        </p>
                    </div>
                    <div style={{
                        display: "grid",
                        gridTemplateColumns: '1fr',
                        gap: 10,
                        marginBottom: 60
                    }}>
                        <TabItem img={home} text={'Overview'}/>
                        <TabItem img={app} text={'Course'}/>
                        <TabItem img={folder} text={'Resources'}/>
                        <TabItem img={message} text={'Message'}/>
                        <TabItem img={setting} text={'Setting'} isSelected={true}/>
                    </div>
                    <div style={{
                        flexGrow: 1
                    }}>
                        <img style={{
                            width: 400,
                            marginBottom: 60,
                        }} src={show} alt=""/>
                    </div>
                    <div style={{
                        background: '#ecf9ff',
                        borderRadius: 20,
                        padding: 20,
                        width: 150,
                        margin: '0 auto',
                        fontWeight: 'bold',
                    }}>
                        <p>Upgrade Your Plan</p>
                        <div style={{
                            display: "flex",
                            alignItems: "center",
                            justifyContent: 'space-between'
                        }}>
                            <p style={{fontWeight: 'normal', color: '#4192ff'}}>
                                Go to <span style={{fontWeight: 'bold'}}>PRO</span>
                            </p>
                            <img style={{
                                width: 20
                            }} src={rightArrow} alt=""/>
                        </div>
                    </div>
                </div>
                <div className={'container'} style={{
                    flexGrow: 1,
                }}>
                    <div className={'container-item'}>
                        <UserProfile pos={'l'}/>
                        <Welcome/>
                        <Title title={'My Courses'} subTitle={'View All'}/>
                        <CardList/>
                        <Title title={'Planning'} subTitle={'View All'}/>
                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: '1fr',
                            gap: 10
                        }}>
                            <Item icon={barChatIcon} color={'rgba(32,232,82,0.2)'}/>
                            <Item icon={circleUp} color={'rgba(232,162,32,0.16)'}/>
                            <Item icon={notice} color={'rgba(189,32,232,0.07)'}/>
                            <Item icon={userMore} color={'#D6EAF8'}/>
                        </div>
                    </div>
                    <div className={'container-item'}>
                        <UserProfile pos={'r'}/>
                        <Title title={'Statistic'} subTitle={'View All'}/>
                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: '1fr 1fr',
                            gap: 20
                        }}>
                            <StatisticCard/>
                            <StatisticCard/>
                            <StatisticCard/>
                            <StatisticCard/>
                        </div>
                        <Title title={'Weekly Work'}/>
                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: '1fr',
                            gap: 10
                        }}>
                            <WorkItem/>
                            <WorkItem/>
                            <WorkItem/>
                            <WorkItem/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}